<template>
	<view class="my-order">
		<u-sticky>
			<view class="row-1">
				<u-tabs :list="list1" lineWidth="72rpx" lineHeight="10rpx" lineColor="rgba(253, 143, 25, 0.50)"
					@change="handleChange" :current="current" :activeStyle="{
				        color: '#303133',
				        fontWeight: 'bold',
						fontSize:'30rpx',
				        transform: 'scale(1.05)',
						whiteSpace:'nowrap'
				    }" :inactiveStyle="{
				        color: '#606266',
				        transform: 'scale(1)',
						fontSize:'30rpx',
						whiteSpace:'nowrap'
				    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :scrollable="false">
				</u-tabs>
			</view>
		</u-sticky>
		<view class="row-2">
			<view class="list">
				<view class="list-item" v-for="(item,index) in listData" :key="index" @click="handleClick(item)">
					<view class="header">
						<view class="left">
							<text>订单号：{{item.orderNumber||'21312321351'}}</text>
							<u-icon name="arrow-right" color="#B9B9B9" size="12"></u-icon>
						</view>
						<view class="tips">{{item.orderState | orderStateFilter}}</view>
					</view>
					<!-- 多个商品 -->
					<view class="shopping" v-if="item.wcOrderGoodsList.length > 1">
						<scroll-view scroll-x="true" class="scroll-x">
							<view>
								<view class="box">
									<view class="box-item" v-for="(_item,_index) in item.wcOrderGoodsList"
										:key="_index">
										<image :src="realmName+_item.goodsPic" mode="aspectFill" class="image" />
										<view class="numb">x{{_item.num}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 单个商品 -->
					<view class="shopping" v-else>
						<view class="box-once">
							<image :src="realmName+item.wcOrderGoodsList[0].goodsPic" mode="aspectFill" class="image" />
							<view class="text">{{item.wcOrderGoodsList[0].goodsName}}</view>
						</view>
					</view>
					<view class="price">
						<text>共1件商品 合计：</text>
						<text style="color: #FD8F19;font-size:24rpx">￥</text>
						<text style="color: #FD8F19;">{{item.actualPayment || 0}}</text>
					</view>
					<view class="operate" v-if="[1,2,3,4,5].some(_i=> _i == item.orderState)">
						<view class="btn" v-if="item.orderState == 3" @click.stop="handleSeeLogistics(item)">查看物流</view>
						<view class="btn" v-if="item.orderState == 3" @click.stop="handleSureShopping(item)">确认收货</view>
						<view class="btn" v-if="item.orderState == 5">退款/售后</view>
						<view class="btn evaluate" v-if="item.orderState == 4" @click.stop="handlePj(item)">评价</view>
						<view class="btn" @click.stop="handleTx" v-if="item.orderState == 2">提醒发货</view>
						<view class="btn" @click.stop="handleShowCancelOrder(item)" v-if="item.orderState == 1">取消订单</view>
						<view class="btn pay" @click.stop="handlePay(item)" v-if="item.orderState == 1">去支付</view>
					</view>
				</view>

				<view>
					<u-loadmore :status="status" bgColor="#F7F7F7" marginTop="20" />
				</view>
			</view>
		</view>
		<!-- 商品物流 -->
		<shopping-logistics ref="shopping-logistics"></shopping-logistics>
		<!-- 商品评价 -->
		<shopping-comment ref="shopping-comment" @submit="resetGetList"></shopping-comment>
		<reason-for-refund @submit="handleCancel" ref="reason-for-refund2" title="取消订单原因"></reason-for-refund>
	</view>
</template>

<script>
	import {
		listMyOrder,
		updateMyOrder,
		confirmReceiveGoods
	} from "@/culturalCreativity/http/my.js";
	import shoppingLogistics from "../components/shopping-logistics.vue";
	import reasonForRefund from "../components/reason-for-refund.vue";
	import shoppingComment from "../components/shopping-comment.vue";
	import {
		realmName
	} from "@/http";
	export default {
		components: {
			shoppingLogistics,
			reasonForRefund,
			shoppingComment
		},
		data() {
			return {
				current: 1,
				pageNum: 1,
				listDataLoading: true,
				realmName,
				listData: [],
				status: 'nomore',
				list1: [{
					name: '全部',
					orderState: '',
					index: 0
				}, {
					name: '待付款',
					orderState: 1,
					index: 1
				}, {
					name: '待发货',
					orderState: 2,
					index: 2
				}, {
					name: '待收货',
					orderState: 3,
					index: 3
				}, {
					name: '待评价',
					orderState: 4,
					index: 4
				}],
			}
		},
		onLoad({
			current
		}) {
			this.handleChange({
				index: current
			});
		},
		onShow() {
			let str = uni.getStorageSync('NEXT_PAGE');
			if (str == 'orderDetails') this.resetGetList();
			uni.setStorageSync('NEXT_PAGE', '');
		},
		onReachBottom() {
			if (!this.listDataLoading) return;
			this.listDataLoading = false;
			this.getList();
		},
		methods: {
			async getList() {
				this.status = "loading"
				let orderState = this.list1.reduce((pev, item) => {
					if (item.index == this.current) {
						pev = item.orderState;
					}
					return pev
				}, '');
				let res = await listMyOrder({
					pageNum: 1,
					pageSize: 20 * this.pageNum,
					orderState
				});
				let listData = res.data.rows;
				if (listData.length < res.data.total) {
					this.listDataLoading = true;
				} else {
					this.listDataLoading = false;
					console.log("已加载全部");
				}
				this.listData = listData;
				this.pageNum = this.pageNum + 1;
				this.status = "nomore";
			},
			handleShowCancelOrder(options) { //打开取消订单原因
				this.$refs['reason-for-refund2'].init(options);
			},
			async handleSureShopping(options) {
				try {
					uni.showLoading({
						title: "正在确认...",
						mask: true
					})
					let res = await confirmReceiveGoods(options.orderId);
					this.resetGetList();
					uni.showToast({
						title: "确认成功",
						icon: "success"
					});
				} catch (e) {
					uni.hideLoading();
					console.error(e);
				}
			},
			handleSeeLogistics(options) {
				this.$refs['shopping-logistics'].init(options.orderNumber);
			},
			handlePj(options){
				this.$refs['shopping-comment'].init(options);
			},
			handleTx() {
				uni.showToast({
					title: "提醒成功",
					icon: "success"
				})
			},
			handleChange(e) {
				this.current = e.index;
				this.pageNum = 1;
				this.listDataLoading = true;
				this.listData = [];
				this.getList();
			},
			resetGetList() {
				if (this.listDataLoading) this.pageNum = this.pageNum - 1;
				this.getList();
			},
			async handleCancel(options) {
				uni.showLoading({
					title: "正在取消..."
				})
				let res = await updateMyOrder({
					orderId: options.orderId,
					orderNumber: options.orderNumber,
					orderState: 6, //取消订单
				});
				uni.showToast({
					title: "取消成功",
					icon: "success"
				});
				this.resetGetList();
			},
			handlePay(options) {
				uni.setStorageSync("msg_data", {
					totalAmount: options.actualPayment,
					orderId: options.orderNumber,
					fileName: "culturalCreativity"
				});
				uni.navigateTo({
					url: "/commonPages/pay/index"
				});
			},
			handleClick(options) {
				if (![1, 2, 3, 4, 5, 6].some(item => item == options.orderState)) return;
				uni.setStorageSync('NEXT_PAGE', 'orderDetails');
				uni.navigateTo({
					url: "/culturalCreativity/my/orderDetails?id=" + options.orderId
				});
			}
		},
		filters: {
			orderStateFilter(num) {
				num = Number(num);
				switch (num) {
					case 1:
						return '待付款'
					case 2:
						return '待发货'
					case 3:
						return '待收货'
					case 4:
						return '待评价'
					case 5:
						return '交易完成'
					case 6:
						return '取消订单'
					case 7:
						return '自动取消'
					case 8:
						return '交易关闭'
					default:
						return 'error';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs__wrapper__nav {
		height: 60rpx !important;
	}

	.my-order {
		min-height: 100vh;
		background-color: #F7F7F7;

		.row-2 {
			.list {
				padding-bottom: 100rpx;

				.list-item {
					margin-top: 24rpx;
					padding: 32rpx 32rpx 0 32rpx;
					border-radius: 30rpx;
					background-color: #FFFFFF;

					.operate {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding: 24rpx 0;
						border-top: 1px solid #EEEEEE;

						.btn {
							width: 150rpx;
							height: 56rpx;
							line-height: 56rpx;
							text-align: center;
							border-radius: 30rpx;
							border: 2rpx solid #BDBDBD;
							font-size: 28rpx;
							font-weight: 400;
							color: #1F1F1F;

							&+.btn {
								margin-left: 24rpx;
							}
						}

						.btn.evaluate {
							border-color: #FD8F19;
							color: #FD8F19;
						}

						.btn.pay {
							background-color: #FD8F19;
							border-color: #FD8F19;
							color: #FFFFFF;
						}
					}

					.price {
						padding: 32rpx 0;
						display: flex;
						justify-content: flex-end;
						font-size: 28rpx;
						color: rgba(31, 31, 31, 1);
					}

					.shopping {
						.box-once {
							display: flex;
							align-items: center;

							.image {
								min-width: 160rpx;
								max-width: 160rpx;
								height: 160rpx;
								border-radius: 16rpx;
								margin-right: 24rpx;
							}

							.text {
								font-size: 28rpx;
								font-weight: 500;
								color: #1F1F1F;
							}
						}

						.scroll-x {
							width: 100%;

							.box {
								display: flex;

								.box-item {
									position: relative;
									border-radius: 16rpx;
									overflow: hidden;
									margin-right: 24rpx;
									display: flex;
									min-width: 160rpx;
									max-width: 160rpx;

									.image {
										min-width: 160rpx;
										max-width: 160rpx;
										height: 160rpx;
									}

									.numb {
										position: absolute;
										right: 0;
										bottom: 0;
										padding: 8rpx 9rpx;
										color: #FFFFFF;
										font-size: 28rpx;
										border: 16rpx 0 0 0;
										background-color: rgba(0, 0, 0, 0.40);
									}
								}
							}
						}
					}

					.header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #1F1F1F;
						padding-bottom: 24rpx;

						.left {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}

		.row-1 {
			background-color: #FFFFFF;
			padding-bottom: 14rpx;
		}
	}
</style>
